<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>TM Lib</title>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script>
            var texture = null;
            
            TM.loadScript("app");
            
            TM.main(function(){
                var canvas = document.createElement("canvas");
                canvas.width = window.innerWidth; canvas.height = window.innerHeight;
                canvas.style.position = "fixed";
                canvas.style.left = canvas.style.top = "0px";
                var context = canvas.getContext("2d");
                
                // context.fillRect(0, 0, 100, 100);
                
                createTexture();
                createFontTexture();
                
                console.time("a");
                draw(context);
                console.timeEnd("a");
                
                document.body.appendChild(canvas);
            });
            
            var draw = function(ctx)
            {
                ctx.fillStyle = "black";
                ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
                
                ctx.save();
                ctx.globalCompositeOperation = "lighter";
                // ctx.globalAlpha = 0.5;
                // 四角形
                for (var i=0; i<6; ++i) {
                    var y = i*20;
                    
                    for (var j=0; j<60; ++j) {
                        var x = j*20;
                        var index = (i*60+j);
                        drawImage(ctx, texture, (i*60+j), x+10, y+10, 15, 15);
                        // drawImage(ctx, texture, (i*60+j), Math.random()*256, Math.random()*256, 15, 15);
                        // drawImage(ctx, texture, (i*60+j), Math.random()*256, Math.random()*256, 15, 15);
                        // drawImage(ctx, texture, (i*60+j), Math.random()*256, Math.random()*256, 15, 15);
                        // drawImage(ctx, texture, (i*60+j), Math.random()*256, Math.random()*256, 15, 15);
                        // ctx.fillStyle = "hsl(" + index + ", 50%, 50%)";
                        // ctx.fillRect(x+10, y+10, 15, 15);
                    }
                }
                
                // サークル
                /*
                for (var i=0; i<6; ++i) {
                    var y = i*20;
                    
                    for (var j=0; j<60; ++j) {
                        var x = j*20;
                        var index = (i*60+j);
                        // drawImage(ctx, texture, (i*60+j), x+10, y+10, 15, 15);
                        ctx.fillStyle = "hsl(" + index + ", 50%, 50%)";
                        drawCircle(ctx, x, y, 5);
                    }
                }
                */
                
                ctx.restore();
            };
            
            var drawImage = function(ctx, texture, frameIndex, x, y, width, height)
            {
                width  = width || texture.frameWidth;
                height = height || texture.frameHeight;
                ctx.drawImage(texture.canvas,
                    frameIndex*texture.frameWidth, 0, texture.frameWidth, texture.frameHeight,
                    x, y, width, height);
            };
            
            var drawCircle = function(ctx, x, y, radius)
            {
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI*2, false);
                ctx.fill();
                ctx.closePath();
            };
            
            var createTexture = function()
            {
                texture = TM.App.Texture();
                texture.canvas.width = 360*15;
                texture.frameWidth = 15;
                texture.frameHeight= 15;
                
                texture.context.shadowBlur = 5;
                texture.context.shadowColor = "#fff";
                
                for (var i=0; i<360; ++i) {
                    texture.context.fillStyle = "hsl(" + (360/360)*i + ", 50%, 50%)";
                    texture.context.fillRect(i*15+2.5, 0+2.5, 10, 10);
                }
                
                // texture.save();
                
                
                return texture;
            };
            
            var createFontTexture = function()
            {
                var SIZE = 64;
                
                var fontTexture = TM.App.Texture();
                fontTexture.canvas.width = 16*SIZE;
                fontTexture.canvas.height= 16*SIZE;
                
                fontTexture.context.font = "32px 'ＭＳ Ｐゴシック'";
                fontTexture.context.font = "32px 'メイリオ'";
                fontTexture.context.textAlign = "center";
                fontTexture.context.textBaseline = "middle";
                
                /*
                fontTexture.context.shadowBlur = 5;
                fontTexture.context.shadowColor = "#000";
                fontTexture.context.shadowOffsetX = 5;
                */
                
                for (var i=0; i<16; ++i) {
                    for (var j=0; j<16; ++j) {
                        var ch = String.fromCharCode(i*16+j);
                        fontTexture.context.fillText(ch, j*SIZE+SIZE/2, i*SIZE+SIZE/2, SIZE);
                        fontTexture.context.strokeRect(j*SIZE, i*SIZE, SIZE, SIZE);
                    }
                }
                
                // fontTexture.save();
            };
            
            
        </script>

    </head>
    
    <body>
    </body>
</html>
